<template>
    <div>
        <div id="container"></div>
    </div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;

onMounted(() => {
    window._AMapSecurityConfig = {
        securityJsCode: "829ad09ae782570684d61f67a080c944",
    };
    AMapLoader.load({
        key: "b196cc6ae3600c969bd4ab4e5f434475", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
        .then((AMap) => {
            map = new AMap.Map("container", {
                center: [116.471354, 39.994257],
                zoom: 16.8
            });
            var path1 = [[116.475334, 39.997534], [116.476627, 39.998315], [116.478603, 39.99879], [116.478529, 40.000296], [116.475082, 40.000151], [116.473421, 39.998717]]
            var path2 = [[116.474595, 40.001321], [116.473526, 39.999865], [116.476284, 40.000917]]
            var polygon1 = new AMap.Polygon({
                path: path1
            })
            var polygon2 = new AMap.Polygon({
                path: path2
            })

            map.add([polygon1, polygon2]);
            map.setFitView();
            var polyEditor = new AMap.PolygonEditor(map);
            polyEditor.addAdsorbPolygons([polygon1, polygon2]);
            polyEditor.on('add', function (data) {
                console.log(data);
                var polygon = data.target;
                polyEditor.addAdsorbPolygons(polygon);
                polygon.on('dblclick', () => {
                    polyEditor.setTarget(polygon);
                    polyEditor.open();
                })
            })
            polygon1.on('dblclick', () => {
                polyEditor.setTarget(polygon1);
                polyEditor.open();
            })
            polygon2.on('dblclick', () => {
                polyEditor.setTarget(polygon2);
                polyEditor.open();
            })
            function createPolygon() {
                polyEditor.close();
                polyEditor.setTarget();
                polyEditor.open();
            }
            polyEditor.setTarget(polygon2);
            polyEditor.open();
        })
        .catch((e) => {
            console.log(e);
        });
});

onUnmounted(() => {
    map?.destroy();
});
</script>

<style lang="scss" scoped>
#container {
    width: 800px;
    height: 800px;
}
</style>